{% extends "base.html" %}
{% load cctags %}

{% block scripts %}
<link type="text/css" rel="stylesheet" href="/static/styles/riders.css"/>
<script type="text/javascript" language="javascript" src="/static/js/vanadium-min.js"></script>
<script type="text/javascript">
var VanadiumConfig = {separator: '|'};
$(document).ready(function(){ 

});
</script>    
{% endblock %}

{% block menu %}
{% include '_menu_riders.html' %}
{% endblock %}

{% block main-page %}
<div id="join_left"><img src="/static/images/join_back.jpg"/></div>
<div id="join_right">
    <form method="post" id="join_form">
        <span id="join_info">{% _m "Join MagiCycles, Join %0 riders' community" stats.riders_count %}</span>
        <table id="join_table">
            <tr>
                <td colspan="3" class="tips">
                    {% _ "Welcome" %} {{ outsiteuser.uid }},
                    {% _m "You are using your %0 Account for login" _(outsiteuser.site) %}
                       <a href="{% url views.login %}"> {% _ "Change Account" %}</a>
                </td>
            </tr>
            <tr>
                <th scope="row">{% _ "Login Account" %}:</th>
                <td><input id="uid" name="uid" type="text" size="30" value=""
        class=":required :alphanum :min_length|{% if isadmin %}1{% else %}4{% endif %} :max_length|20"/>
                <span class="tips">{% _ "Your login account, can not be changed after submit" %}</span></td>
            </tr>
            <tr>
                <th scope="row">{% _ "Nick Name" %}:</th>
                <td><input id="nickname"  name="nickname" type="text" size="30" value="{{outsiteuser.name}}"
                           class=":required :format|/^[^<>]*$/i|adv_name :min_length|2 :max_length|25"/>
                    <span id="adv_name" style="display:none">[< >] {% _ "are not allowed" %}</span>
                <span class="tips">{% _ "Your display name" %}</span></td>
            </tr>

            <tr>
                <th scope="row">{% _ "Intro" %}:</th>
                <td><textarea id="intro" name="intro" wrap="soft" rows="5" cols="25"
                              class=":required :format|/^[^<>;]*$/i|adv_intro :min_length|2 :max_length|35">{{outsiteuser.description}}</textarea>
                    <span id="adv_intro" style="display:none">[< > ;] {% _ "are not allowed" %}</span>
                </td>
            </tr>
            <tr>
                <th scope="row">&nbsp;
                </th>
                <td>
                    <input id="agree" value="1" name="agree" type="checkbox" class=":accept"/>
                    {% _ "Agree" %} <a href="{% url views.tos %}" target="_blank">{% _ "Terms of Service" %}</a>?
                <span class="tips">{% _ "agree the TOS to join" %}</span></td>
            </tr>
            {% if error_msg %}
             <tr>
                <th scope="row">&nbsp;
                </th>
                <td>
                    <span class="tips">{{ error_msg }}</span>
                </td>
            </tr>
            {% endif %}
            <tr>
                <th scope="row">&nbsp;
                    <input id="photourl" name="photourl" type="hidden" value="{{outsiteuser.photourl|safe}}"/>
                    <input id="email" name="email" type="hidden" value="{{outsiteuser.email}}"/>
                </th>
                <td>
                    <input type="submit" id="join_btn" class="cmdbutton"
                           value="{% _ 'Join Now' %}" />
                </td>
            </tr>
        </table>
    </form>
    <span id="back_logo">MagiCycles.com</span>
</div>
{% endblock %}
